<template>
  <div>
    <div style="display: flex; justify-content: flex-end;margin: 10px">
      <a-button type="primary" @click="editClass(null)">新增角色</a-button>
    </div>

    <a-table
      :columns="columns"
      :rowKey="record => record.roleId"
      bordered
      @change="tableChange"
      :dataSource="dataTable"
      :pagination="pagination"
    >
      <template slot="operation" slot-scope="text, row, index">
        <a-button
          size="small"
          type="primary"
          @click="editClass(row)"
          v-if="row.roleId != 1"
          >编辑</a-button
        >
        <a-button
          size="small"
          type="primary"
          @click="setting(row)"
          v-if="row.roleId != 1"
          >权限设置
        </a-button>
        <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delPlan(row)"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="small" type="danger" v-if="row.roleId != 1"
            >删除</a-button
          >
        </a-popconfirm>
      </template>
    </a-table>

    <!-- 编辑弹框 -->
    <a-modal
      v-model="editVisible"
      :title="this.modelTittle"
      @ok="editOk"
      cancelText="关闭"
      okText="确定"
    >
      <a-form :form="formData">
        <a-form-item
          label="角色名称"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input
            v-decorator="[
              'roleName',
              {
                initialValue: roleName,
                rules: [{ required: true, message: '请输入角色名称' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="角色描述"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-textarea
            :rows="4"
            v-decorator="[
              'tips',
              {
                initialValue: tips,
                rules: [{ required: true, message: '请输入角色描述' }]
              }
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 权限设置弹框 -->
    <a-modal
      v-model="settingVisible"
      title="权限设置"
      @cancel="settingCancel"
      @ok="settingOk"
      cancelText="关闭"
      okText="确定"
    >
      <a-form>
        <a-form-item
          label="当前角色"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          {{ this.roleName }}
        </a-form-item>
        <a-form-item
          label="权限设置"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-tree
            v-model="checkedKeys"
            checkable
            :selected-keys="selectedKeys"
            :tree-data="jurisdiction"
            @expand="onExpand"
            @select="onSelect"
            @check="onCheck"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import api from "@/api/api.js";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import tinymce from "@/components/tinymce";
export default {
  // components:{
  //     quillEditor
  // },
  data() {
    return {
      editVisible: false,
      settingVisible: false,
      valle: "11",
      pagination: {},
      value: [],
      dataTable: [],
      modelTittle: "",
      columns: [
        {
          title: "角色名称",
          dataIndex: "roleName",
          align: "center"
        },
        {
          title: "角色描述",
          dataIndex: "tips",
          align: "center"
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          align: "center"
        },
        {
          title: "操作",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" }
        }
      ],
      form: {
        size: 10, //每页条数
        page: 1 // 起始页
      },
      totalPage: 0,
      showHOST: api.showHOST,
      formData: this.$form.createForm(this),
      roleName: "",
      tips: "",
      rowData: {},
      jurisdiction: [],
      selectedKeys: [],
      checkedKeys: []
    };
  },
  methods: {
    cancel(e) {
      this.$message.error("取消!");
    },
    tableChange(pagination, filters, sorter) {
      this.form.page = pagination.current;
      this.getPlan();
    },
    getPlan() {
      api.getRoleList(this.form).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.totalPage = res.result.totalCount;
          this.dataTable = res.result;
        }
      });
    },
    rowClassName(record, index) {},
    editClass(row) {
      this.formData = this.$form.createForm(this);
      if (row === null) {
        this.editVisible = true;
        this.modelTittle = "新增账号";
      } else {
        this.editVisible = true;
        this.modelTittle = "修改信息";
        this.rowData = row;
        this.roleName = row.roleName;
        this.tips = row.tips;
      }
    },
    setting(row) {
      this.rowData = row;
      this.jurisdiction = [];
      this.checkedKeys = [];
      api.getMenuAndRole({ roleId: row.roleId }).then(res => {
        if (res.code == 200) {
          this.roleName = row.roleName;
          let jurisdictionArr = res.result.menus;
          jurisdictionArr.forEach((ele, i) => {
            if (i == 0) {
              return;
            }
            let title = "";
            let key = "";
            let code = "";
            let children = [];
            if (ele.parentCode == 0) {
              title = ele.menuName;
              key = ele.menuId;
              code = ele.menuCode;
              children = [];
              this.jurisdiction.push({
                title: title,
                key: key,
                code: code,
                children: children
              });
            } else {
              this.jurisdiction.forEach(el => {
                if (ele.parentCode == el.code) {
                  el.children.push({
                    title: ele.menuName,
                    key: ele.menuId
                  });
                }
              });
            }
          });
          let showChecks = res.result.roles;
          showChecks.forEach(s => {
            this.checkedKeys.push(s.menuId);
          });
        }
      });

      this.settingVisible = true;
    },
    delPlan(row) {
      api.delRole({ roleIds: row.roleId }).then(res => {
        if (res.code == 200) {
          this.getPlan();
        }
      });
    },
    editOk(e) {
      this.formData.validateFields((err, values) => {
        if (this.modelTittle == "修改信息") {
          values.roleId = this.rowData.roleId;
          values.status = this.rowData.status;
        }
        if (!err) {
          api.saveRole(values).then(res => {
            if (res.code == 200) {
              this.editVisible = false;
              this.getPlan();
            } else {
              this.$message.error(res.description);
            }
          });
        }
      });
    },
    settingOk(e) {
      console.log(this.checkedKeys.toString());
      let obj = {
        ids: this.checkedKeys.toString(),
        roleId: this.rowData.roleId
      };
      api.saveRoleMenu(obj).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
        } else {
          this.$message.error(res.description);
        }
      });

      this.settingVisible = false;
    },
    settingCancel() {
      // this.jurisdiction =[]
    },
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    }
  },
  created() {
    this.getPlan();
  },
  components: { quillEditor, quillRedefine }
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
